import styled from 'styled-components'

export const FooterWrapper = styled.div`
  margin-top: 30px;
  padding-bottom: 67px;
  .wrap-v2 {
    display: flex;
    margin-top: 10px;
    .pic-link {
      flex: 1;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .link-icon {
      display: inline-block;
      width: 45px;
      height: 45px;
      background: url(${require('@/assets/img/foot_enter_new2.png')}) no-repeat;
      background-size: 220px 220px;
    }
    .logonew_01 {
      background-position: -170px -5px;
      &:hover {
        background-position: -5px -115px;
      }
    }
    .logonew_02 {
      background-position: -5px -170px;
      &:hover {
        background-position: -60px -170px;
      }
    }

    .logonew_03 {
      background-image: url(${require('@/assets/img/xStudio.png')});
      background-size: 45px;
      &:hover {
        background-image: url(${require('@/assets/img/xStudioHover.png')});
        background-size: 45px;
      }
    }

    .logonew_04 {
      background-position: -60px -60px;
      &:hover {
        background-position: -115px -5px;
      }
    }

    .logonew_05 {
      background-image: url(${require('@/assets/img/aiLogo.png')});
      background-size: 45px;
      &:hover {
        background-image: url(${require('@/assets/img/aiLogoHover.png')});
        background-size: 45px;
      }
    }

    .logonew_06 {
      background-image: url(${require('@/assets/img/cloudSong.png')});
      background-size: 45px;
      &:hover {
        background-image: url(${require('@/assets/img/cloudSongHover.png')});
        background-size: 45px;
      }
    }

    .logonew_07 {
      background-position: -170px -115px;
      &:hover {
        background-position: -60px -115px;
      }
    }
    .link-name {
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .copy {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    .link {
      width: 56%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .link-text {
        flex: 1;
        color: #666;
        text-align: center;
        &:last-child {
          border: none;
        }
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .jubao {
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    .jubao-link {
      display: inline-block;
      margin-right: 14px;
      &:hover {
        color: rgba(0, 0, 0, 0.5);
        text-decoration: underline;
      }
    }
    .jubao-mail {
      margin-right: 14px;
    }
    .jubao-link {
      color: rgba(0, 0, 0, 0.5);
    }
    .wangwen {
      display: inline;
      color: rgba(0, 0, 0, 0.5);
      &:hover {
        color: rgba(0, 0, 0, 0.5);
        text-decoration: underline;
      }
    }
    .beian {
      .icon {
        width: 14px;
        height: 14px;
        vertical-align: top;
        margin-top: 1px;
      }
    }
  }
`
